<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { Ref } from "vue"
import PhoneCard from "./PhoneCard.vue";
import { ItemData } from "../../common/type/base";
import { getIPhoneList } from "../../common/api/index";

const navTitle = [{
    title: "苹果",
    id: 53,
}, {
    title: "华为",
    id: 52,
}, {
    title: "小米",
    id: 54,
}, {
    title: "OPPO",
    id: 55,
}, {
    title: "荣耀",
    id: 129,
}];

const props = withDefaults(
    defineProps<{
        btnTitle?: string,
        className?: string,
        bgSrc: string,
        defaultColor: string,
        activeColor: string,
    }>(),
    {
        defaultColor: "white",
        activeColor: "white",
    }
)
const dataList: ItemData[] = reactive([]);

const currenIndex: Ref<Number> = ref(0)
function getClass(index: number): string {
    return currenIndex.value === index ? "active" : "";
}
function changeIndex(index: number, id: number): void {
    if (currenIndex.value === index) return
    currenIndex.value = index;
    getData(id);
}

getData(navTitle[0].id);
function getData(cate_id: number) {
    getIPhoneList({
        cate_id,
        convey_type: 1,
        orderby_name: "id",
        sort: "desc",
        size: 1,
        pageSize: 6
    }).then(res => {
        dataList.splice(0);
        const data = res.data.data;
        dataList.push(...data);
    })
}
function getBgImg() {
    return `url("${props.bgSrc}")`;
}

</script>
<template>
    <div class="android-card" :style="{ backgroundImage: getBgImg() }">
        <div class="nav">
            <div class="item f12" :class="getClass(index)" v-for="(ele, index) in navTitle" :key="ele.id"
                @click="changeIndex(index, ele.id)">
                {{ ele.title }}
            </div>
        </div>
        <div class="list">
            <div class="item" :btn-title="btnTitle" v-for="item in dataList" :key="item.id">
                <phone-card :price="item.min_price" trendTitle="首月1元" :imgPath="item.imgurl"
                    :maintitle="item.extension_title" :id="item.id" minTitle="首月一元" />
            </div>
        </div>
    </div>
</template>
<style lang="scss">
.android-card {
    background-size: contain;
    overflow: hidden;
    border-radius: 20px;

    .nav {
        display: flex;
        padding: 0 16px;
        align-items: center;
        justify-content: space-around;
        height: 60px;
        margin-top: 114px;
        margin-bottom: 32px;

        .item {
            padding: 8px 18px;
            color: v-bind(defaultColor);
            border-radius: 5px;
            overflow: hidden;
            letter-spacing: 2px;
            border: 1px solid v-bind(defaultColor);
            transition: all .3s;

            &.active {
                font-size: 28px;
                font-weight: bold;
                color: v-bind(activeColor);
                border: 1px solid v-bind(activeColor);
                transform: scale(1.1);
            }
        }
    }

    .list {
        padding: 15px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 20px;

        .item {
            width: 220px;
            // height: 316px;
            border-radius: 16px;
            background-color: white;
            margin-right: 15px;
            margin-bottom: 15px;
            overflow: hidden;

            &:nth-of-type(3n) {
                margin-right: 0;
            }

        }
    }
}
</style>